<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>转换</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box1{
				/*
				 问卷星:
				 position: absolute;
				top:50%;
				left: 50%;
				transform: translate(-50%,50%) 又位移又旋转 加到后面就行; */
				/* margin: 200px auto; */
				width: 300px;
				height: 300px;
				background-color: deeppink;
				transition: all 2s linear;
				/* 方位词:水平方向(left,right,center),垂直方向(top,bottom,center) */
				transform-origin: 50% 50%;
			}
			.box1:hover{
				/* 过渡transform:
					1.位移:translate(x轴,y轴)
							translatex(x轴)，translatey(y轴)；
					2.缩放scale(倍数)，scalex(宽度缩放)，scaley(高度缩放)
					3.旋转rotate(度数)，单位deg,正数顺时针、负数逆时针
					4.倾斜skew(度数)，单位deg,skewx()
				*/
				/* transform: translate(100px,200px); */
				transform: skew(-45deg,45deg);
			}
			.bigbox{
				width: 100%;
				height: 500px;
				background-color: #c0c0c0;
			}
			.box2{
				
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				width: 60px;
				height: 70px;
				background-color: aquamarine;
				transition: all .5s linear;
			}
			.bigbox:hover .box2{
				left: 0;
			}
		</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="bigbox">
		<div class="box2"></div>
		</div>
	</body>
</html>